<template>
  <div v-if="inEdit" class="property-integer-input-div">
    <!-- https://blog.csdn.net/Piqzem/article/details/88908096 -->
    <!-- 限制element-ui表单中input框只能输入数字和小数点 -->
    <el-input-number
      ref="input"
      v-model.number="data"
      :min="min"
      :max="max"
      :step="step"
      :controls="false"
      controls-position="right"
      size="mini"
      placeholder="*多种*"
      @change="onChange"
      @keyup.enter.native="onEnter"
      @blur="onBlur"
    />
  </div>
  <div v-else class="no-edit-text">{{ label }}</div>
</template>

<script>
import props from '../mixins/props'

export default {
  name: 'PropertyInteger',
  mixins: [props],
  props: {
    // 最小值
    min: {
      type: Number,
      required: false,
      default: -Infinity
    },
    // 最大值
    max: {
      type: Number,
      required: false,
      default: Infinity
    },
    // 步长
    step: {
      type: Number,
      required: false,
      default: 1
    }
  },
  data() {
    return {
      data: undefined
    }
  },
  computed: {
    label() {
      return typeof this.data !== 'number' ? '*多种*' : this.data
    }
  },
  watch: {
    value(val) {
      this.data = this.getData(val)
    }
  },
  created() {
    this.data = this.getData(this.value)
  },
  methods: {
    getData(val) {
      try {
        if (val !== null && val !== undefined) {
          const _val = parseInt(val)
          if (isNaN(_val)) {
            return undefined
          } else {
            return this.ruleValue(_val)
          }
        } else {
          return undefined
        }
      } catch (err) {
        return undefined
      }
    },
    // // 参见: interact.js/onUpdateCmdResult()函数
    // onUpdateCmdResult (result) {
    //   // 更新长度(强制类型转换)
    //   this.data = parseInt(result)
    //   // 向父组件发送change消息(参数需转换为json字符串!!!)
    //   this.$emit('change', JSON.stringify(this.data))
    // },
    ruleValue(val) {
      if (val < this.min) {
        return this.min
      } else if (val > this.max) {
        return this.max
      } else {
        return val
      }
    },
    onChange(val) {
      // 更新data数据
      this.data = this.getData(val)
      if (typeof this.data === 'number') {
        // 向父组件发送change消息(参数需转换为json字符串!!!)
        this.$emit('change', JSON.stringify(this.data))
      }
    },
    onEnter(event) {
      this.data = this.getData(event.target.value)
      if (typeof this.data === 'number') {
        // 向父组件发送change消息(参数需转换为json字符串!!!)
        this.$emit('change', JSON.stringify(this.data))
      }
    },
    onBlur(event) {
      // console.log('int.vue 失去焦点')
      if (this.inEdit) {
        // 强行夺回焦点
        this.$refs.input.focus()
      }
    }
  }
}
</script>

<style lang="scss">
%input-numberi-size {
  width: 18px !important;
  height: 10px !important;
  line-height: 10px !important;
  font-size: 10px !important;
}

.property-integer-input-div {
  .el-input-number {
    width: 100% !important;
    .el-input__inner {
      text-align: left !important;
    }
    .el-input-number__decrease,
    .el-input-number__increase {
      @extend %input-numberi-size;
      i {
        @extend %input-numberi-size;
      }
    }
  }
}
</style>
